<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-body">
        <form class="form-inline">
          <div class="box box-default">
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
              <button class="btn btn-primary" type="button" (click)="showQuery()">
                <i class="fa fa-search"></i>搜索</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-an-export')" type="button" class="btn btn-primary" (click)="exportExcel()">
                <i class="fa fa-sign-out"></i>导出</button>
              <button class="btn btn-box-tool pull-right" type="button" data-widget="collapse">
                <i class="fa fa-minus"></i>
              </button>
            </div>
            <div class="box-body" style="display:block">
              <div class="form-group col-lg-12" style="padding-left:0px !important;">
                <label>组合名称：</label>
                <input class="form-control" placeholder="组合名称" [(ngModel)]="getBody.sFullName" name="sFullName">
                <label>组合代码：</label>
                <input class="form-control" placeholder="组合代码" [(ngModel)]="getBody.sFundCode" name="sFundCode">
                <button class="btn btn-primary" (click)="loadcheck('page')">
                  <i class="fa fa-search"></i>查询</button>
              </div>
            </div>
          </div>
        </form>

        <div class="box-body" style="padding-left:0px;padding-right:0px;">
          <!-- updated by dujh @20180703 修改表格变为可拉伸 -->
          <div style="overflow-x:scroll;height:450px" id="sqList" class="tbHeaderFix">
            <table class="table table-bordered table-keep-line table-hover table-striped" style="margin-top:unset !important;">
              <thead>
                <tr>
                  <th class="width-5">
                    <div class="checkbox checkbox-primary">
                      <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                      <label>
                      </label>
                    </div>
                  </th>
                  <th class="width-10" (click)="orderData('sFundCode')">组合代码
                    <i class="fa fa-sort"></i>
                  </th>
                  <th class="width-15" (click)="orderData('sFullName')">组合名称
                    <i class="fa fa-sort"></i>
                  </th>
                  <th class="width-30" (click)="orderData('sNetValueFluctuation')">净值大幅波动提醒
                    <i class="fa fa-sort"></i>
                  </th>
                  <th class="width-30" (click)="orderData('sSpecialTerms')">特殊服务条款
                    <i class="fa fa-sort"></i>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of dataList">
                  <td class="width-5">
                    <div class="checkbox checkbox-primary">
                      <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                      <label>
                          </label>
                    </div>
                  </td>
                  <td class="width-10 short_name" [attr.title]="item.sFundCode">{{item.sFundCode}}</td>
                  <td class="width-15 short_name" [attr.title]="item.sFullName">{{item.sFullName}}</td>
                  <td class="width-30 short_name" [attr.title]="item.sNetValueFluctuation">{{item.sNetValueFluctuation}}</td>
                  <td class="width-30 short_name" [attr.title]="item.sSpecialTerms">{{item.sSpecialTerms}}</td>
                </tr>
              </tbody>

            </table>
          </div>
        </div>

        <div class="box-footer clearfix" style="width:100%;">
          <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
            <div class="pull-left pagination-detail" data-pagination-additional="true">
              <span class="pagination-info">
                当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
              </span>
              <span class="page-list">
                每页记录
                <span class="btn-group dropup">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="page-size">{{listPageInfo.pageSize}}</span>
              <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
              </span>
              条
              </span>
            </div>
          </app-pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 搜索modal -->
<div class="modal modal-open modal-detail" id="annuityServiceQuery">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        <h4 class="modal-title">搜索</h4>
      </div>
      <div class="modal-body" style="padding-top:10px;">
        <form class="form-horizontal" style="padding-top:5px">
          <div class="form-group">
            <label class="col-lg-2 text-right">组合名称：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sFullName" name="sFullName">
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">组合代码：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sFundCode" name="sFundCode">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">组合类型：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sProductTypeSelected" [(ngModel)]="postBody.sProductType" name="sProductType">
                      <option [value]="''">--请选择--</option>
                      <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.ANNUITY_TYPE">{{item.sItemValue}}</option>
                    </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">合同名称：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sContractName" name="sContractName">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">委托人：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sPrincipal" name="sPrincipal">
            </div>
            <div class="col-lg-1"></div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">受托人：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sLinkPrincipalNoSelected" [(ngModel)]="postBody.sLinkPrincipalNo" name="sLinkPrincipalNo">
                  <option [value]="''">--请选择--</option>
                  <option [value]="item.sItemKey" *ngFor="let item of distionary.LINK_PRINCIPAL_NO">{{item.sItemValue}}</option>
                </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">投管人：</label>
            <div class="col-lg-3">
              <select class="form-control select2 sInvest-select" style="width:190px !important" multiple="multiple" [(ngModel)]="sInvestSelectList"
                name="sInvest">
                    <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.INVEST">{{item.sItemValue}}</option>
                  </select>
              <!-- <input class="form-control" type="text" [(ngModel)]="postBody.sInvest" name="sInvest"> -->
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">托管人：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sTrusteeSelected" [(ngModel)]="postBody.sTrustee" name="sTrustee">
                                  <option [value]="''">--请选择--</option>
                                  <option [value]="item.sItemKey" *ngFor="let item of distionary.TRUSTEE">{{item.sItemValue}}</option>
                                </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">账管人：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sManagerSelected" [(ngModel)]="postBody.sManager" name="sManager">
                                  <option [value]="''">--请选择--</option>
                                  <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.MANAGER">{{item.sItemValue}}</option>
                                </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">项目经理：</label>
            <div class="col-lg-3">
              <select class="form-control select2 manager-select" style="width:190px !important" multiple="multiple" [(ngModel)]="managerSelectList"
                name="sProjectManager">
                  <option [value]="item.sUserName" *ngFor="let item of ProjectManagerList">{{item.sRealName}}</option>
                </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">投资经理：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sManagerNo" name="sManagerNo">
            </div>
          </div>

          <div style="border-top: 1px solid #ddd;width:90%;margin-left:3%;margin-bottom:15px"></div>

          <div class="form-group">
            <label class="col-lg-2 text-right">备案机构：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sRecordorgTypeSelected" [(ngModel)]="postBody.sRecordorgType" name="sRecordorgType">
                      <option [value]="''">--请选择--</option>
                      <option [value]="item.sItemKey" *ngFor="let item of distionary.RECORDORG_TYPE">{{item.sItemValue}}</option>
                    </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">计划登记号：</label>
            <div class="col-lg-3">
              <input class="form-control" maxlength="10" type="text" [(ngModel)]="postBody.sPlanNo" name="sPlanNo">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">所属地区：</label>
            <div class="col-lg-3">
              <app-area-data-cn [code]="area" name="sArea" [attr.title]="postBody.sArea.split(',')[1]" (areaChange)="OnAreaChg($event)"
                (codeChange)="OnAreaCodeChg($event)"></app-area-data-cn>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">所属行业</label>
            <div class="col-lg-3">
              <select class="form-control" id="sCallingSelected" [(ngModel)]="postBody.sCalling" name="sCalling">
                    <option [value]="''">--请选择--</option>
                    <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.CALLING">{{item.sItemValue}}</option>
                  </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">是否央企</label>
            <div class="col-lg-3">
              <select class="form-control" id="sIsCentralEnterpriserSelected" [(ngModel)]="postBody.sIsCentralEnterpriser" name="sIsCentralEnterpriser">
                                  <option [value]="''">--请选择--</option>
                                  <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.CENTRAL_ENTERPRISER">{{item.sItemValue}}</option>
                                </select>
            </div>
            <div class="col-lg-1"></div>
          </div>

          <div style="border-top: 1px solid #ddd;width:90%;margin-left:3%;margin-bottom:15px"></div>

          <div class="form-group">
            <label class="col-lg-2 text-right">合同期限：</label>
            <div class="col-lg-3">
              <select class="form-control" id="sTermTypeSelected" [(ngModel)]="postBody.sTermType" name="sTermType">
                  <option [value]="''">--请选择--</option>
                  <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.TERM_TYPE">{{item.sItemValue}}</option>
                </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">是否自动续约：</label>
            <div class="col-lg-3">
              <select class="form-control" [(ngModel)]="postBody.sIsRenewal" name="sIsRenewal">
                  <option [value]="''">--请选择--</option>
                  <option value="1">是</option>
                  <option value="0">否</option>
                </select>
            </div>
          </div>

          <div style="border-top: 1px solid #ddd;width:90%;margin-left:3%;margin-bottom:15px"></div>

          <div class="form-group">
            <label class="col-lg-2 text-right">业绩比较基准：</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="postBody.sBenchmark" name="sBenchmark">
            </div>
            <div class="col-lg-1"></div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">是否资产移交：</label>
            <div class="col-lg-3">
              <select class="form-control" [(ngModel)]="postBody.sIsAssetTransfer" name="sIsAssetTransfer" (ngModelChange)="IsAssetTransfer()">
                    <option [value]="1">是</option>
                    <option [value]="0">否</option>
                  </select>
            </div>
            <div class="col-lg-1"></div>
            <label class="col-lg-2 text-right">移交投管人：</label>
            <div class="col-lg-3">
              <select class="form-control select2 sInvestor-select" style="width:190px !important" multiple="multiple" [(ngModel)]="sInvestorSelectList"
                name="sInvestor" [disabled]="postBody.sIsAssetTransfer == '0'">
                    <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.OTHER_INVESTOR">{{item.sItemValue}}</option>
                  </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary pull-right" (click)="resetQuery()">
              <i class="fa fa-circle-o-notch"></i>重置</button>
        <button class="btn btn-primary pull-right" (click)="loadcheck('query')">
              <i class="fa fa-search"></i>查询</button>
        <button class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>